<!DOCTYPE html>
<html>
<head>
	<!-- 设置浏览器不缓存 -->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
	<!-- Content-Type -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!-- Favicon -->
	<link rel="shortcut icon" href="./images/logo.png">
	<title>企业服务共享中心</title>
	<!--stylesheets-->
	<link rel="stylesheet" href="./plugins/element/index.css">
	<script src="./plugins/vue/vue.js"></script>
	<script src="./plugins/element/index.js"></script>
	<script src="./plugins/axios/axios.min.js"></script>
	<script src="./js/common/public.js?v=0.8.0.3"></script>
	<!-- 自定义样式表 -->
	<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
</head>
<body>
<div id="app">
<template>
<el-container class="maincontainer">
	<el-container class="submaincontainer">
		<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
		  <div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
			<el-form :model="queryForm" ref="queryForm" >
					<el-form-item label="关键字" prop="keyword"  maxlength="20" autocomplete="off">
					  <el-input v-model="queryForm.keyword"></el-input>
					</el-form-item>
					<el-form-item label="税务类型" prop="taxtype">
						<el-select v-model="queryForm.taxtype" filterable clearable>
							<el-option v-for="item in taxtypeoptions" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-checkbox-group v-model="queryForm.src">
						<el-form-item label="客户来源" prop="src">
						  <el-checkbox label="线索">线索</el-checkbox>
						  <el-checkbox label="工商">工商</el-checkbox>
						  <el-checkbox label="渠道">渠道</el-checkbox>
						  <el-checkbox label="其他">其他</el-checkbox>
						</el-form-item>
					</el-checkbox-group>
					<el-checkbox-group v-model="queryForm.assignetype">
						<el-form-item label="分配方式" prop="assignetype">
						  <el-checkbox label="自动">自动</el-checkbox>
						  <el-checkbox label="手动">手动</el-checkbox>
						</el-form-item>
					</el-checkbox-group>
					<el-radio-group v-model="queryForm.status">
						<el-form-item label="状态" prop="status">
						  <el-radio label="已分配" >已分配</el-radio>
						  <el-radio label="未分配" >未分配</el-radio>
						  <el-radio label="禁用" >禁用</el-radio>
						</el-form-item>
					</el-radio-group>
					<el-form-item label="成立日期" prop="founddate" >
						<el-date-picker style="width:235px"
							value-format="yyyy-MM-dd"
							  v-model="queryForm.founddate"
							  type="daterange"
							  width="100"
							  align="right"
							  unlink-panels
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="添加日期" prop="createdatetime" >
						<el-date-picker style="width:235px"
							value-format="yyyy-MM-dd"
							  v-model="queryForm.createdatetime"
							  type="daterange"
							  width="100"
							  align="right"
							  unlink-panels
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				  <el-form-item>
					<el-button size="small" type="primary" @click.native.prevent="start" style="position:fixed;left:20px;bottom:5px;">查询</el-button>
				  </el-form-item>
			</el-form>
		  </div>
		</el-card>
		<el-card class="box-card" style="width:100%" shadow="never">
		  <div slot="header" class="clearfix">
		  <i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
			<span>客户列表</span>
			<el-button-group style="float: right;margin-top:0px;">
					<el-tooltip v-for="item in toolbar" class="item" effect="dark" v-bind:content="item.content" placement="top-start">
						  <el-button size="small" v-bind:icon="item.icon" v-bind:type="item.type" @click="toolAction(item.content)">{{item.content}}</el-button>
					</el-tooltip>
			</el-button-group>
		  </div>
		  <div>
			  <el-table
				row-key="id"
			  border
				ref="multipleTable"
				@select='selectionChange'
				:data="pagedata"
				tooltip-effect="dark"
				:height="tableHeight"
				style="width: 100%;"
				@selection-change="handleSelectionChange">
				<el-table-column
				  type="selection"
				  min-width="55">
				</el-table-column>
				<el-table-column type="expand">
				  <template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
					  <el-form-item label="地址">
						<span>{{ props.row.address}}</span>
					  </el-form-item>
					  <el-form-item label="公司类型">
						<span>{{ props.row.comptype}}</span>
					  </el-form-item>
					  <el-form-item label="注册资金">
						<span>{{ props.row.registeredcapital }}</span>
					  </el-form-item>
					  <el-form-item label="税务类型">
						<span>{{ props.row.taxtype}}</span>
					  </el-form-item>
					  <el-form-item label="经营范围" style="width: 100%">
						<span>{{ props.row.businessscope }}</span>
					  </el-form-item>
				  </template>
				</el-table-column>
				<el-table-column
				v-for="column in tablecolums"
				  v-bind:prop="column.prop"
				  v-bind:label="column.label"
				  v-bind:min-width="column.width"
				  show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" min-width="50">
				  <template slot-scope="scope">
					  <el-link type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
				  </template>
				</el-table-column>
			  </el-table>
			  <div style="margin-top: 20px">
			  
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentPageChange"
				:current-page="queryForm.pageNo"
				:page-sizes="queryForm.pagesizes"
				  :page-size="queryForm.pagesize"
				  background
				  layout="total,sizes, prev, pager, next"
				  :total="pagetotal">
				</el-pagination>
			  </div>			  
		  </div>
		</el-card>
	</el-container>
</el-container>
<el-dialog :close-on-click-modal="false"  title="客户信息" :visible.sync="dialogFormVisible" width="600px">
    <el-form :model="customerForm" :rules="customerRules" ref="customerForm" label-width="80px">
		<el-row :gutter="20">
		  <el-col :span="16">
			  <el-form-item label="公司名称" prop="compname"  >
				  <el-input v-model="customerForm.compname" maxlength="50"></el-input>
			  </el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <el-form-item label="法人" prop="legalperson"  >
				  <el-input v-model="customerForm.legalperson" maxlength="20"></el-input>
			  </el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <el-form-item label="联系人" prop="contacter"  >
				  <el-input v-model="customerForm.contacter" maxlength="20"></el-input>
			  </el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="12">
			<el-form-item label="联系电话" prop="phone">
				<el-input v-model="customerForm.phone"  maxlength="20"></el-input>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="10">
			<el-form-item label="区域" prop="area">
				<!-- <el-input v-model="customerForm.area"  maxlength="50"></el-input> -->
				<el-select v-model="customerForm.area" filterable >
					  <el-option
						v-for="item in areas"
						:key="item"
						:label="item"
						:value="item">
					  </el-option>
				</el-select>
			</el-form-item>
		  </el-col>
		  <el-col :span="10">
			<el-button type="primary" icon="el-icon-edit" circle size="small" @click="addAreaDailogOpen"></el-button>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="20">
			<el-form-item label="地址" prop="address">
				<el-input v-model="customerForm.address"  maxlength="100"></el-input>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
			  <el-form-item label="公司类别" prop="comptype">
				<el-select v-model="customerForm.comptype" placeholder="请选择">
				  <el-option
					v-for="item in comptypeoptions"
					:key="item"
					:label="item"
					:value="item">
				  </el-option>
				</el-select>
			</el-form-item>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="10">
			<el-form-item label="注册资金" prop="registeredcapital">
				<el-input v-model="customerForm.registeredcapital"  maxlength="10"></el-input>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="10">
				<el-form-item label="税务类型" prop="taxtype">
					<el-select v-model="customerForm.taxtype" filterable clearable>
						<el-option v-for="item in taxtypeoptions" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="20">
			<el-form-item label="经营范围" prop="businessscope">
				<el-input v-model="customerForm.businessscope" type="textarea"></el-input>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
			<el-form-item label="成立日期" prop="founddate">
			<el-date-picker
			value-format="yyyy-MM-dd"
			  v-model="customerForm.founddate"
			  type="date"
			  placeholder="选择日期">
			</el-date-picker>
			</el-form-item>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-radio-group v-model="customerForm.src">
					<el-form-item label="来源" prop="src">
					  <el-radio label="线索">线索</el-radio>
					  <el-radio label="工商">工商</el-radio>
					  <el-radio label="渠道">渠道</el-radio>
					  <el-radio label="其他">其他</el-radio>
					</el-form-item>
				</el-radio-group>
			<el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-radio-group v-model="customerForm.status">
					<el-form-item label="状态" prop="status">
					  <el-radio label="正常">正常</el-radio>
					  <el-radio label="禁用">禁用</el-radio>
					</el-form-item>
				</el-radio-group>
			<el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
			  <el-form-item label="备注" prop="memo"  >
				  <el-input v-model="customerForm.memo" maxlength="250"></el-input>
			  </el-form-item>
		  </el-col>
		</el-row>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="cofirm">确 定</el-button>
  </div>
</el-dialog>
<el-dialog :close-on-click-modal="false"  title="客户分配" :visible.sync="dialogAssigneFormVisible" width="350px">
    <el-form :model="trackForm" ref="trackForm" label-width="80px">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item label="跟踪者" prop="trackerid">
				<el-select v-model="trackForm.trackerid" filterable>
				  <el-option
					v-for="item in members"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				  </el-option>
				</el-select>
				</el-form-item>
			<el-col>
		</el-row>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAssigneFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="cofirmAssigne">确 定</el-button>
  </div>
</el-dialog>
<el-dialog :close-on-click-modal="false"  title="客户导入" :visible.sync="dialogimportFormVisible" width="500px">
    <el-form :model="importForm" :rules="importRules" ref="importForm" label-width="80px">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-radio-group v-model="importForm.src">
					<el-form-item label="来源" prop="src">
					  <el-radio label="线索">线索</el-radio>
					  <el-radio label="工商">工商</el-radio>
					  <el-radio label="渠道">渠道</el-radio>
					  <el-radio label="其他">其他</el-radio>
					</el-form-item>
				</el-radio-group>
			<el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-radio-group v-model="importForm.assignetype">
					<el-form-item label="分配方式" prop="assignetype">
					  <el-radio label="自动">自动</el-radio>
					  <el-radio label="手动">手动</el-radio>
					</el-form-item>
				</el-radio-group>
			<el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item label="部门" prop="deptid">
					<el-select v-model="importForm.deptid">
					  <el-option
						v-for="item in depts"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					  </el-option>
					</el-select>
				</el-form-item>
			<el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24" style="padding-left: 50px;">
				<el-upload
				  class="upload-demo"
				  drag
				  :action="uploadurl + importForm.src + ',' + importForm.assignetype+ ',' + importForm.deptid"
				  :headers="headers"
				  :before-upload="beforeAvatarUpload"
				  :on-success="handleAvatarSuccess"
					accept=".xls,.xlsx"
				  multiple>
				  <i class="el-icon-upload"></i>
				  <div class="el-upload__text">将文件拖到此处，或<em>点击导入</em></div>
				  <div class="el-upload__tip" slot="tip">
					  只能导入XLS/XLSX文件，且不超过5mb<br>
					  仅支持格式：<br>
					  公司名称，类型，地区，注册资本，法定代表人，住所，成立日期，经营范围，电话号码，备注<br>
				  </div>
				</el-upload>
			<el-col>
		</el-row>
    </el-form>
</el-dialog>
</template>
</div>
</body>

<script src="./js/customer.js?v=0.8.0.3"></script>

</script>	
</html>
